<template>
  <el-container class="indexbody">
    <div id="indexMain">
      <!--导航菜单-->
      <div class="indexnav">
        <el-row>
          <el-menu :router="true" class="el-menu-demo" mode="horizontal" background-color="transparent" text-color="#fff" active-text-color="#ffd04b">
            <el-col :span="6">
              <el-menu-item index=""><img src="./../assets/logo.png" style="width:260px;" /></el-menu-item>
            </el-col>
            <el-col :span="3">
              <el-menu-item index="#"><img src="./../assets/home.svg" /><span>首页</span></el-menu-item>
            </el-col>
            <el-col :span="3">
              <el-menu-item index="/App/MapPage" :route="{ path: '/App/MapPage', query: { type: 'mapPage' } }"><img src="./../assets/shishishuiqing.svg" /><span>实时水情</span></el-menu-item>
            </el-col>
            <el-col :span="3">
              <el-menu-item index="/App/RainMonitor" :route="{ path: '/App/MapPage', query: { type: 'rain' } }"><img src="./../assets/yuliang.svg" /><span>实时雨量</span></el-menu-item>
            </el-col>
            <el-col :span="9" align="right">
              <el-menu-item index="/Login"><img src="./../assets/exit.svg" /><span>退出</span></el-menu-item>
            </el-col>
          </el-menu>
        </el-row>
      </div>
      <!--实时预警 -->
      <div class="warning">
        <el-row>
          <el-col :span="3">
            <div @click="getWarning('rivers')">
              <img src="./../assets/hedaoshuiqing-01.svg" />
              <div class="warningMonitor"><span style="display:block;">河道监测</span><span class="warningMonitorAlarm">{{this.early.river}}<span class="warningMonitorSum">({{this.early.RiverNumber}}个）</span></span></div>
            </div>
          </el-col>
          <el-col :span="3">
            <div @click="getWarning('lakes')">
              <img src="./../assets/hupo-01.svg" />
              <div class="warningMonitor"><span style="display:block;">湖泊监测</span><span class="warningMonitorAlarm">{{this.early.lake}}<span class="warningMonitorSum">({{this.early.LakeNumber}}个）</span></span></div>
            </div>
          </el-col>
          <el-col :span="3">
            <div @click="getWarning('reservoir')">
              <img src="./../assets/shuiku-01.svg" />
              <div class="warningMonitor"><span style="display:block;">水库监测</span><span class="warningMonitorAlarm">{{this.early.reservoir}}<span class="warningMonitorSum">({{this.early.ReservoirNumber}}个）</span></span></div>
            </div>
          </el-col>
          <el-col :span="3"><img src="./../assets/hanzha-01.svg" />
            <div class="warningMonitor"><span style="display:block;">涵闸监测</span><span class="warningMonitorAlarm">{{this.early.gate}}<span class="warningMonitorSum">({{this.early.GateNumber}}个）</span></span></div>
          </el-col>
          <el-col :span="3"><img src="./../assets/gangqu-01.svg" />
            <div class="warningMonitor"><span style="display:block;"> 港渠监测</span><span class="warningMonitorAlarm">{{this.early.canal}}<span class="warningMonitorSum">({{this.early.CanalNumber}}个）</span></span></div>
          </el-col>
          <el-col :span="3">
            <div @click="getWarning('waterLogging')">
              <img src="./../assets/zishui-01.svg" />
              <div class="warningMonitor"><span style="display:block;">渍水监测</span><span class="warningMonitorAlarm">{{this.early.waterlogging}}<span class="warningMonitorSum">({{this.early.WaterloggingNumber}}个）</span></span></div>
            </div>

          </el-col>
          <el-col :span="3"><img src="./../assets/bengzhan-01.svg" />
            <div class="warningMonitor"><span style="display:block;">泵站监测</span><span class="warningMonitorAlarm">{{this.early.PumpStation}}<span class="warningMonitorSum">({{this.early.PumpStationNumber}}个）</span></span></div>
          </el-col>
        </el-row>
      </div>

      <!--左侧三个表格数据 -->
      <el-row>
        <el-col :span="7">
          <div class="indexleft">
            <div class="databox">
              <el-row>
                <el-col :span="16" class="tag_select">
                  <span tabindex='0' :class="river?dataBoxTitle_focus:dataBoxTitle_blur" @click="getRiverData" style="margin-right:10px;">河道</span>
                  <span tabindex='0' :class="lake?dataBoxTitle_focus:dataBoxTitle_blur" @click="getLakeData" style="margin-right:10px;">湖泊</span>
                  <span tabindex='0' :class="canal?dataBoxTitle_focus:dataBoxTitle_blur" @click="getCanalData">港渠</span>
                </el-col>
                <el-col :span="8" class="tag_select">
                  <el-select v-model="basin" placeholder="请选择" @change="riverChange" v-show="river" size="mini">
                    <el-option v-for="item in riverOptions" :key="item.RVNM" :label="item.RVNM" :value="item.RVNM"></el-option>
                  </el-select>
                  <el-select v-model="lakeDscd" placeholder="请选择" @change="lakeChange" v-show="lake" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                  <el-select v-model="canalDscd" placeholder="请选择" @change="canalChange" v-show="canal" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                </el-col>
              </el-row>

              <el-table :data="riverTableData" style="font-size: 12px" :cell-style="tableRowStyle">
                <el-table-column class-name="sequenceNumber" Opacity="0.25" type="index" width="45" label="序号" align="center"> </el-table-column>
                <el-table-column prop="STNM" label="站名" width="100" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="LE" label="水位(m)" min-width="65"> </el-table-column>
                <el-table-column prop="YMDHM" label="时间" min-width="110" align="center" :formatter="timeFormatter"></el-table-column>
              </el-table>
              <el-pagination small layout="total , prev, pager, next" :total='this.rivertotal' :current-page='this.currentPage' :page-size='this.pagesize' @current-change='riverPaging'>
              </el-pagination>
            </div>

            <div class="databox">
              <el-row>
                <el-col :span="16" class="tag_select">
                  <span tabindex='0' :class="reservoir?dataBoxTitle_focus:dataBoxTitle_blur" @click="getReservoir" style="margin-right:6px;">水库</span>
                  <span tabindex='0' :class="gate?dataBoxTitle_focus:dataBoxTitle_blur" @click="getGate" style="margin-right:6px;">涵闸</span>
                  <span tabindex='0' :class="pumpStation?dataBoxTitle_focus:dataBoxTitle_blur" @click="getPumpStation">泵站</span>
                </el-col>
                <el-col :span="8" class="tag_title">
                  <el-select v-model="skdscd" placeholder="请选择" @change="skChange" v-show="reservoir" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                  <el-select v-model="hzdscd" placeholder="请选择" @change="hzChange" v-show="gate" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                  <el-select v-model="bzdscd" placeholder="请选择" @change="bzChange" v-show="pumpStation" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                </el-col>
              </el-row>

              <el-table :data="tableData" style="font-size: 12px" :cell-style="tableRowStyle">
                <el-table-column class-name="sequenceNumber" Opacity="0.25" type="index" width="45" label="序号" align="center"> </el-table-column>
                <el-table-column prop="STNM" label="站名" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column v-if="this.reservoir" prop="LE" label="水位(m)" min-width="65"> </el-table-column>
                <el-table-column v-if="this.pumpStation" prop="T" label="运行台时" width="70"> </el-table-column>
                <el-table-column v-if="this.pumpStation" prop="TS" label="开机台数" width="70"> </el-table-column>
                <el-table-column v-if="this.pumpStation" prop="ZQ" label="前池水位" width="70"> </el-table-column>
                <el-table-column v-if="this.pumpStation" prop="QS" label="抽排量" width="70"> </el-table-column>
                <el-table-column v-if="this.gate" prop="ZNSW" label="闸内水位" width="70"> </el-table-column>
                <el-table-column v-if="this.gate" prop="ZWSW" label="闸外水位" width="70"> </el-table-column>
                <el-table-column prop="YMDHM" label="时间" align="center" min-width="110" :formatter="timeFormatter"></el-table-column>
              </el-table>
              <el-pagination small layout="total , prev, pager, next" v-show="this.reservoir" :total='this.reservoirtotal' :current-page='this.reservoirpage' :page-size='this.pagesize' @current-change='handleCurrentChangeReservoir'>
              </el-pagination>
              <el-pagination small layout="total , prev, pager, next" v-show="this.gate" :total='this.gatetotal' :current-page='this.gatepage' :page-size='this.pagesize' @current-change='handleCurrentChangeGate'>
              </el-pagination>
              <el-pagination small layout="total , prev, pager, next" v-show="this.pumpStation" :total='this.pumpStationtotal' :current-page='this.pumpStationpage' :page-size='this.pagesize' @current-change='handleCurrentChangePumpStation'>
              </el-pagination>
            </div>
          </div>
        </el-col>

        <!--中间地图和水系选择 -->
        <el-col :span="10">
          <div class="indexmiddle">
            <div class="indexmap">
              <!-- <img src="./../assets/map.svg"/> -->
              <BaseMap ref="map" :controls="[]" :max-zoom="16" :base-map-layers="[satelliteMapSource]">
                <div>
                  <!-- 关于维也纳信息的点击标签 -->
                  <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
                  <div id="marker" title="Marker"></div>
                  <!-- 弹窗 -->
                  <div id="popup" title="Welcome to OpenLayers">11111111111</div>
                </div>
              </BaseMap>
            </div>
            <div class="databox1">
              <div class="superviseHeadline">
                <img src="./../assets/yellow line.svg" />排水水系
              </div>
              <span style="color:white;font-size: 14px;margin-left:20px;">水系选择:</span>
              <el-select style="margin:0 0 0px 10px;" size="mini" v-model="waterSysCode" placeholder="请选择" change="currentSel">
                <el-option v-for="item in sxoptions" :key="item.MID" :label="item.MNAME" :value="item.MID">
                </el-option>
              </el-select>
              <div class="riverSystem" @click="postArrIndex(arrIndex)" v-for="(item, arrIndex) in waterSystemData" :key="arrIndex">
                <span v-for="(item2, index1) in item" :key="item2.MID">
                  {{ item2.RNAME }}{{ item.length - 1 !== index1 ? " —— " : "" }}
                </span>
              </div>
            </div>
          </div>
        </el-col>

        <!--右侧图表数据 -->
        <el-col :span="7">
          <div class="indexright">
            <div class="databox">
              <el-row class="tabsTitle">
                <el-col :span="14" class="tag_select">
                  <span tabindex='0' :class="qxyttp?dataBoxTitle_focus:dataBoxTitle_blur" @click="getqxyt">气象云图</span>
                  <span tabindex='0' :class="ldhbttp?dataBoxTitle_focus:dataBoxTitle_blur" @click="getldhbt">雷达回播图</span>
                </el-col>
              </el-row>
              <div class="imgBox" v-show="qxyttp">
                <img v-for="(key) in qxyt" :key="key" class="img-slide img1" :src="'data:image/png;base64,'+key" alt="1">
              </div>
              <div class="imgBox" v-show="ldhbttp">
                <img v-for="(key) in ldhbt" :key="key" class="img-slide1 img1" :src="'data:image/png;base64,'+key" alt="1">
              </div>
            </div>

            <div class="databox">
              <el-row class="tabsTitle">
                <el-col :span="16" class="tag_select">
                  <span tabindex='0' :class="rain?dataBoxTitle_focus:dataBoxTitle_blur" @click="getHourRain">24小时雨量</span>
                  <span tabindex='0' :class="rainHour?dataBoxTitle_focus:dataBoxTitle_blur" @click="getDayRain">小时雨量</span>
                </el-col>
                <el-col :span="8" class="tag_select">
                  <el-select v-model="yldscd" placeholder="请选择" @change="ylchange" v-show="rain" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                  <el-select v-model="ylhourdscd" placeholder="请选择" @change="ylHourchange" v-show="rainHour" size="mini">
                    <el-option v-for="item in districtOptions" :key="item.dscd" :label="item.dsnm" :value="item.dscd"></el-option>
                  </el-select>
                </el-col>
              </el-row>

              <el-table :data="dayRainTablse" style="font-size: 12px">
                <el-table-column class-name="sequenceNumber" type="index" width="45" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="STNM" label="站名" width="100" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="SR" label="雨量(mm)" width="80">
                </el-table-column>
                <el-table-column prop="YMDHM" label="时间" width="110" align="center" :formatter="timeFormatter"></el-table-column>
              </el-table>
              <el-pagination small layout="total , prev, pager, next" v-show="this.rain" :total="this.raintotal" :current-page="this.rainpage" :page-size="this.pagesize" @current-change="handleCurrentChangerain">
              </el-pagination>
              <el-pagination small layout="total , prev, pager, next" v-show="this.rainHour" :total="this.rainHourTotal" :current-page="this.rainHourTotal" :page-size="this.pagesize" @current-change="handleCurrentChangerainHour">
              </el-pagination>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
  </el-container>
</template>

<script>
import BaseMap from './map/common-map/base-map'
import Vectorlayer from 'ol/layer/vector'
import Overlay from 'ol/Overlay'

import VectorSource from 'ol/source/vector'
import GeoJSON from 'ol/format/GeoJSON'
import Text from 'ol/style/Text'
import Fill from 'ol/style/fill'
import Stroke from 'ol/style/stroke'
import Style from 'ol/style/style'
import Icon from 'ol/style/Icon'

// 单独引入
import { satelliteMapSource } from "./map/mapSource.js"
// 定义图层上的图标相关样式
const pointFeatureStyle = function (icon, name, feature, resolution, level = 80) {
  let url = ''
  if (feature.values_.type) {
    url = `${feature.get('type')}`

  } else {
    url = 5
  }
  return new Style({
    // 图标样式
    image: new Icon({
      anchorXUnits: 'pixels',
      anchorYUnits: 'pixels',
      anchor: [17, 17],
      // 可用if判断type值来区别不同的图标或者直接用字符串拼接,通过更改图标名称
      src: `/static/icon/` + url + `.png`// `${feature.get('type')}`
      // src: `/static/img/map.svg`//
    }),
    // 文字样式
    text: new Text({
      offsetY: -30,
      font: '15px 微软雅黑',
      fill: new Fill({ color: '#0057b1' }),
      stroke: new Stroke({ color: '#ffffff', width: 2 }),
      text: resolution < level ? name : ''
    }),
    // 填充样式
    fill: new Fill({
      color: [0, 0, 255, 0.2]
    })
  })
}
export default {
  data() {
    return {
      basin: '长江', //根据河流查询河道数据，默认值长江
      lakeDscd: '420115',   //行政区划
      skdscd: '420115',   //水库的行政区划
      hzdscd: '420116',  //涵闸行政区划
      canalDscd: '420116',    //港渠行政区号
      bzdscd: '420116',
      yldscd: '420116',
      ylhourdscd: '420116',
      waterSys: false,
      waterSystem: {},   //水系
      // reservoirTableData: [],  //水库数据
      // gateTableData: [],   //涵闸数据
      riverTableData: [],   //河道table数据集合
      tableData: [],
      dayRainTablse: [],
      districtOptions: [],  //行政区划选项集合
      satelliteMapSource,    //地图配置
      waterSysCode: '',   //水系的下拉框值
      waterSysCodeChild: '',
      sxoptions: [],  //水系的下拉框选项
      waterSystemData: {},   //水系的数据集合
      early: {},       //预警信息集合
      rivertotal: 0,        //河道的table页的总条数
      currentPage: 1, // 当前页数
      pumpStationpage: 1,
      pumpStationtotal: 0,
      rainpage: 1,// 雨量
      raintotal: 0,
      rainHourpage: 1,
      rainHourTotal: 0,
      gatetotal: 0,  //涵闸总数据
      gatepage: 1,  //涵闸页数
      pagesize: 8,   //table一页显示的条数
      reservoirtotal: 0, //水库总数
      reservoirpage: 1,   //水库的当前页数
      riverOptions: [],   //河道的河流选项
      river: true,      //为true时显示河道数据,为false时显示湖泊数据
      lake: false,    //为true时显示湖泊数据,否则显示河道数据
      canal: false,
      reservoir: true,
      gate: false,
      pumpStation: false,
      rain: true,
      rainHour: false,
      qxyttp: true,
      ldhbttp: false,
      qxyt: [],
      ldhbt: [],
      dataBoxTitle_focus: 'dataBoxTitle_focus',
      dataBoxTitle_blur: 'dataBoxTitle_blur',
    }
  },
  beforeDestroy: function () {
    },
  mounted: function () {
            let index = 0
          function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }

      setInterval(ChangeImg,800)
    this.$postJSON('/ssjc/getAllBasin').then(data => { this.riverOptions = data })  //初始化时查询所有流域
    // this.$postJSON('/ssjc/getRaderPicture').then(data => { this.ldhbt = data})
    this.$postJSON('/ssjc/getXzqhInfo').then(data => { this.districtOptions = data })
    // 水系 
    this.$postJSON('/ssjc/RiverSystem/findList').then(data => {
      this.sxoptions = data
      this.waterSysCode = data[0].MID    })

    this.riverQuery(this.basin)    //根据流域查询河道数据

    this.skQuery(this.skdscd)    //初始化通过行政区查询水库数据

    this.hzquery(this.hzdscd)

    this.ylquery(this.yldscd)
    this.getQxytData()

    this.$postJSON('/ssjc/YJXX').then(data => { this.early = data })    //初始化时查询所有预警信息
  },

  methods: {
    getQxytData() {
      this.$postJSON('/ssjc/getSatelliteCloudPicture').then(data => { this.qxyt = data })
    },
    getLdhbtData() {
      this.$postJSON('/ssjc/getRaderPicture').then(data => { this.ldhbt = data })
    },
    riverChange(basin) {  //切换河流时执行的查询方法
      this.riverQuery(basin)
    },
    lakeChange(dscd) {
      this.lakeQuery(dscd)   //切换湖泊时查询方法
    },
    canalChange(dscd) {
      this.canalQuery(dscd)   //切换港渠时查询方法
    },
    skChange(dscd) {    //水库切换行政区划时方法
      this.skQuery(dscd)
    },
    hzChange(dscd) {    //涵闸的切换行政区划查询方法
      this.hzquery(dscd)
    },
    bzChange(dscd) {
      this.bzQuery(dscd)
    },
    ylchange(dscd) {
      this.ylquery(dscd)
    },
    ylHourchange(dscd) {
      this.ylquery
    },
    ylHourquery(dscd) {
      this.$postJSON('/ssjc/getYLhourData', 'dscd=' + dscd + '&page=' + this.rainHourpage + '&pageSize=' + this.pagesize).then(data => {
        this.rainHourTotal = data['total']
        this.dayRainTablse = data['list']
      })
    },
    ylquery(dscd) {
      this.$postJSON('/ssjc/getYLDayData', 'dscd=' + dscd + '&page=' + this.rainpage + '&pageSize=' + this.pagesize).then(data => {
        this.raintotal = data['total']
        this.dayRainTablse = data['list']
      })
    },
    bzQuery(dscd) {
      this.$postJSON('/ssjc/getBZByXzqh', 'dscd=' + dscd + '&page=' + this.pumpStationpage + '&pageSize=' + this.pagesize).then(data => {
        this.pumpStationtotal = data['total']
        this.tableData = data['list']
      })
    },
    riverQuery(basin) {   //根据河流查询河道数据方法
      this.$postJSON('/ssjc/getHDDataByBasin', 'basin=' + basin + '&page=' + this.currentPage + '&pageSize=' + this.pagesize).then(data => {
        this.rivertotal = data['total']
        this.riverTableData = data['list']
      })
    },
    canalQuery(dscd) { // 港渠查询
      this.$postJSON('/ssjc/getGqByXzqh', 'dscd=' + dscd + '&page=' + this.currentPage + '&pageSize=' + this.pagesize).then(data => {
        this.rivertotal = data['total']
        this.riverTableData = data['list']
      })
    },
    lakeQuery(dscd) {   //根据行政区划查询湖泊数据方法
      this.$postJSON('/ssjc/getHpByXzqh', 'dscd=' + dscd + '&page=' + this.currentPage + '&pageSize=' + this.pagesize).then(data => {
        this.rivertotal = data['total']
        this.riverTableData = data['list']
      })
    },
    hzquery(dscd) {   //根据行政区划查询涵闸数据方法
      this.$postJSON('/ssjc/getHZByXzqh', 'dscd=' + dscd + '&page=' + this.gatepage + '&pageSize=' + this.pagesize).then(data => {
        this.gatetotal = data['total']
        this.tableData = data['list']
      })
    },
    skQuery(dscd) {   //根据行政区划查询水库数据方法
      this.$postJSON('/ssjc/getSkByXzqh', 'dscd=' + dscd + '&page=' + this.reservoirpage + '&pageSize=' + this.pagesize).then(data => {
        this.reservoirtotal = data['total']
        this.tableData = data['list']
      })
    },
    timeFormatter(row, column, cellValue, index) {   //table页面时间格式化方法
      if (cellValue) {
        return new Date(cellValue).format('hh:mm yy/MM/dd')
      }
      return ''
    },
    handleCurrentChangeReservoir(page) {  //水库翻页方法
      this.reservoirpage = page
      this.skQuery(this.skdscd)
    },
    handleCurrentChangeGate(page) {    //涵闸翻页方法
      this.gatepage = page
      this.hzquery(this.hzdscd)
    },
    handleCurrentChangerain(page) {
      this.rainpage = page
      this.ylquery(this.yldscd)
    },
    // 分页 paging
    riverPaging(page) {
      this.currentPage = page
      if (this.river === true) {
        this.riverQuery(this.basin)
      }
      if (this.lake === true) {
        this.lakeQuery(this.lakeDscd)
      }
      if (this.canal) {
        this.canalQuery(this.canalDscd)
      }
    },
    handleCurrentChangerainHour(page) {
      this.rainHourpage = page
      this.ylHourquery(this.ylhourdscd)
    },
    handleCurrentChangePumpStation(page) {
      console.log(page)
      this.pumpStationpage = page    //泵站翻页查询方法
      this.bzQuery(this.bzdscd)
    },
    sxchange(selVal) {
      // 水系详情
      console.log(1111)
      this.$postJSON('/ssjc/RiverSystem/findListBYmId', 'MID=' + this.waterSysCode).then(data => {
        this.waterSystemData = data
        let obj = {}
        data.forEach(el => {
          let itemName = el['SUBORDINATEID']
          if (!obj[itemName]) {
            obj[itemName] = []
          }
          obj[itemName].push(el)
        })
        this.waterSystemData = obj
        this.waterSysCodeChild = Object.keys(obj)[0]
      })
    },
    currentSel(selVal) {
      // 水系详情
      this.$postJSON(
        "/ssjc/RiverSystem/findListBYmId",
        "MID=" + this.waterSysCode
      ).then(data => {
        // console.log(data)
        // this.waterSystem = data
        let obj = {};
        data.forEach(el => {
          let itemName = el["SUBORDINATEID"];
          if (!obj[itemName]) {
            obj[itemName] = [];
          }
          obj[itemName].push(el);
        });
        this.waterSystem = obj;
        this.waterSysCodeChild = Object.keys(obj)[0];
      });
    },
    postArrIndex(waterSysCodeChild) {
      console.log(11111)
      let _this = this
      _this.waterSys = true
      _this.$refs['map'].mapObj.getView().animate({ zoom: 13 })
      this.mapReady() 
      this.waterSysCodeChild = waterSysCodeChild
    },
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      return 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
    },

    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      // if (rowIndex === 0) {
      return 'background-color: transparent;color:red red;font-weight: 500;'
      // }
    },
    getRiverData() {
      this.river = true
      this.lake = false
      this.canal = false
      this.currentPage = 1
      this.riverQuery(this.basin)      // 河道水情预警
    },
    getLakeData() {
      this.river = false
      this.lake = true
      this.canal = false
      this.currentPage = 1
      this.lakeQuery(this.lakeDscd)
    },
    getCanalData() {
      this.river = false
      this.lake = false
      this.canal = true
      this.currentPage = 1
      this.canalQuery(this.canalDscd)
    },
    getReservoir() {
      this.reservoir = true
      this.gate = false
      this.pumpStation = false
      this.skQuery(this.skdscd)
    },
    getGate() {
      this.reservoir = false
      this.gate = true
      this.pumpStation = false
      this.hzquery(this.hzdscd)
    },
    getHourRain() {
      this.rain = true
      this.rainHour = false
      this.ylquery(this.yldscd)
    },
    getHourRain() {
      this.rain = false
      this.rainHour = true
      this.ylquery(this.yldscd)
    },
    getDayRain() {
      this.ylHourquery(this.yldscd)
    },
    getPumpStation() {
      this.reservoir = false
      this.gate = false
      this.pumpStation = true
      this.bzQuery(this.bzdscd)
    },
    getqxyt() {
      this.qxyttp = true
      this.ldhbttp = false
      this.getQxytData()
      // if(this.qxyttp === true){

      // }

    },
    getldhbt() {
      this.ldhbttp = true
      this.qxyttp = false
      this.getLdhbtData()
      let index = 0
      function ChangeImg1() {
        index++;
        var a1=document.getElementsByClassName("img-slide1");
        if(index>=a1.length) index=0;
        for(var i=0;i<a1.length;i++){
            a1[i].style.display='none';
        }
        a1[index].style.display='block';
    }
          setInterval(ChangeImg1,800)    

    },
    mapReady() {
      let _this = this
      if (_this.vector) {
        _this.$refs['map'].mapObj.removeLayer(_this.vector)
      }
      if (_this.vectorLine) {
        _this.$refs['map'].mapObj.removeLayer(_this.vectorLine)
      }
      _this.vectorSource = new VectorSource({
        format: new GeoJSON({
          extractStyles: false
        }),
        // 重写加载器
        loader: function (extent, resolution, projection) {
          // console.log(_this.waterSysCodeChild)
          // console.log(_this.waterSysCode)
          // 具体水系点击后显示水系
          // 首页描点
          console.log(_this.waterSys)
          if(_this.waterSys === true){
          _this.$getJSON(`/ssjc/RiverSystem/displayPlace`, {
            MID: _this.waterSysCode,
            SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
            isGeo_: true,
            latitudeKey_: 'lat',
            longitudeKey_: 'lng',
            name: '',
            typeKey_: 'river'
          }).then(json => {
            let f = _this.vectorSource.getFormat()
            // 解析器解析GeoJSON报文
            let features = f.readFeatures(json, { featureProjection: projection })

            f.readProjection(json)
            f.getLastExtent()
            // _this.vectorSource.removeFeatures(features)
            _this.vectorSource.addFeatures(features)
          }).catch(e => {
            _this.vectorSource.removeLoadedExtent(extent)
          })
          // 首页描点连线
          _this.$getJSON(`/ssjc/RiverSystem/displayLine`, {
            MID: _this.waterSysCode,
            SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
            isGeo_: true,
            latitudeKey_: 'lat',
            longitudeKey_: 'lng',
            name: '',
            typeKey_: 'river'
          }).then(json => {
            let f = _this.vectorSource.getFormat()
            // 解析器解析GeoJSON报文
            let features = f.readFeatures(json, { featureProjection: projection })

            f.readProjection(json)
            f.getLastExtent()
            // _this.vectorSource.removeFeatures(features)
            _this.vectorSource.addFeatures(features)
          }).catch(e => {
            _this.vectorSource.removeLoadedExtent(extent)
          })
          }
          // 预警描点 河道
          // console.log(_this.warningTitle)
          if (_this.warningTitle === "rivers") {
            _this.$getJSON(`/ssjc/riverEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild,
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              console.log(json)
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 湖泊
          if (_this.warningTitle === "lakes") {
            _this.$getJSON(`/ssjc/lakeEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              // console.log(json)
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })

              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 水库
          if (_this.warningTitle === "reservoir") {
            _this.$getJSON(`/ssjc/reservoirEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              // console.log(json)
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 渍水
          if (_this.warningTitle === "waterLogging") {
            _this.$getJSON(`/ssjc/WaterloggingEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
        }
      })
      //
      // 新建矢量图层，描点
      let vector = new Vectorlayer({
        source: this.vectorSource,
        style:
          function (feature, resolution) {
            let les = ''
            let name = ''
            if (feature.get('le') === '0') {
              les = '0米'
            } else if (typeof (feature.get('le')) !== 'undefined') {
              les = feature.get('le') + '米'
            }
            if (typeof feature.get('stnm') === 'undefined') {
               if(typeof feature.get('rname') === 'undefined'){
                 name = ' '
                 return
               }else{
                name = 'rname'
               }
            } else {
              name = 'stnm'
            }
            return pointFeatureStyle(
              // 图标
              '',
              // 显示文字
              feature.get(name) + ' ' + les ,
              // // 要素
              feature,
              // 缩放
              resolution
            )
          }
      })
      let vectorLine = new Vectorlayer({
        source: this.vectorSource
      })
      _this.vector = vector
      _this.vectorLine = vectorLine
      // _this.vector1 = vector1
      _this.$refs['map'].mapObj.addLayer(vector)
      _this.$refs['map'].mapObj.addLayer(vectorLine)
      // _this.$refs['map'].mapObj.addLayer(vector1)
    },
    getWarning(title, waterSysCodeChild) {
      let _this = this
      if (title === "rivers") {
        console.log(11111)
        _this.$refs['map'].mapObj.getView().animate({ zoom: 12 })
        this.warningTitle = "rivers"
        this.mapReady()
      }
      if (title === "lakes") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 12 })
        this.warningTitle = "lakes"
        this.mapReady()
      }
      if (title === "reservoir") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 12 })
        this.warningTitle = "reservoir"
        this.mapReady()      }
      if (title === "waterLogging") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 12 })
        this.warningTitle = "waterLogging"
        this.mapReady()      }
      // this.showWarning = true
    }
  },
  watch: {
    waterSysCode() {
      this.sxchange()
    },
    waterSysCodeChild() {
      //
      this.mapReady()
    }
  },
  // 注册组件
  components: {
    // 基础地图封装组件
    BaseMap
  },
}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
#indexMain {
  min-width: 1280px;
  height: 100%;
}
.el-menu-item:hover,
.el-menu-item:focus {
  background: transparent !important;
  color: #fff !important;
}
#indexMain >>> .MenuBar:hover {
  border-bottom: 2px solid #fba100;
}
#indexMain >>> .MenuBarlogo:hover {
  border-bottom: 2px solid transparent;
}
#indexMain >>> .indexnav {
  text-align: center;
}
#indexMain >>> .indexnav img {
  margin-right: 8px;
}
#indexMain >>> .warning .warningMonitorAlarm {
  color: #04b479;
}
#indexMain >>> .warning .warningMonitorSum {
  color: #586c86;
  margin-left: 6px;
}
#indexMain >>> .el-menu.el-menu--horizontal {
  border-bottom: solid 1px #2c4390;
}
#indexMain >>> .el-menu-item,
.el-submenu__title {
  height: 66px;
  line-height: 66px;
}
#indexMain >>> .indexnav {
  width: 100%;
  margin-bottom: 20px;
}
#indexMain >>> .warning {
  width: 90%;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
#indexMain >>> .warning img {
  float: left;
  width: 30px;
  margin: 4px 8px;
  /* padding-left: 10%; */
}
#indexMain >>> .warningMonitor {
  float: left;
  color: white;
  font-size: 14px;
}
#indexMain >>> .indexleft {
  margin: 20px;
}
#indexMain >>> .indexright {
  margin: 20px;
}
#indexMain >>> .indexmap {
  text-align: center;
  height: 526px;
  margin: 20px 0 14px 0;
}
#indexMain >>> .el-tabs__nav-wrap::after {
  background: transparent;
}
#indexMain >>> .indexleft .el-tabs__item {
  padding: 0 10px;
}
#indexMain >>> .indexleft .el-tabs__item {
  height: 0px;
  line-height: 0;
}
#indexMain >>> .el-tabs__nav-scroll {
  float: right;
}
#indexMain >>> .indexleft .el-tabs__header {
  float: right;
}
#indexMain >>> .indexleft .el-tabs__content {
  color: #fba100;
}
#indexMain >>> .indexleft .tag_select {
  color: #586c86;
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 6px;
}
#indexMain >>> .superviseHeadline {
  font-size: 14px;
  color: #fba100;
  margin-bottom: 6px;
}
#indexMain >>> .superviseHeadline img {
  vertical-align: middle;
  margin-right: 8px;
}
#indexMain >>> .el-table__body tr:hover > td {
  background-color: #202a6f !important;
}
#indexMain >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
#indexMain >>> .el-table {
  min-height: 322px;
}
#indexMain >>> .el-table td {
  background-color: transparent !important;
}
#indexMain >>> .el-table tr {
  background-color: transparent;
  color: white;
}
#indexMain >>> .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
#indexMain >>> .el-table td,
.el-table th.is-leaf {
  border: 0;
}
#indexMain >>> .el-table th.is-leaf {
  border: 0;
}
#indexMain >>> .el-table th {
  background-color: rgba(32, 42, 111, 0.5);
}
#indexMain >>> .el-table td {
  padding: 5px 0;
}
#indexMain >>> .el-table th {
  padding: 4px 0;
}
#indexMain >>> .databox {
  box-shadow: 0 0px 1px 1px rgba(27, 201, 255, 0.12);
  border-radius: 2px;
  border: 1px solid rgba(1, 183, 239, 0.2);
  padding: 10px 14px;
  height: 370px;
  margin-bottom: 18px;
  overflow: hidden;
}
#indexMain >>> .databox1 {
  box-shadow: 0 0px 1px 1px rgba(27, 201, 255, 0.12);
  border-radius: 2px;
  border: 1px solid rgba(1, 183, 239, 0.2);
  padding: 10px 14px;
  height: 240px;
  margin-bottom: 18px;
  overflow: hidden;
}
#indexMain >>> .riverSystem {
  color: white;
  font-size: 14px;
  background-image: url(./../assets/redpoint.png);
  background-repeat: no-repeat;
  padding-left: 33px;
  margin: 12px 60px;
}
#indexMain >>> .indexright .promptMessage {
  color: white;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid rgba(1, 183, 239, 0.2);
  padding-top: 20px;
}
#indexMain >>> .indexright .promptMessageCircle {
  background-image: url(./../assets/circle.svg);
  width: 84px;
  height: 84px;
  margin: 0 auto;
  margin-top: 10px;
}
#indexMain >>> .indexright .promptMessageNumber {
  height: 84px;
  line-height: 84px;
  text-align: center;
  color: #7adeff;
  display: block;
  font-size: 24px;
  font-weight: bold;
}
#indexMain >>> .indexright .dateYellow {
  color: #fba100;
  font-size: 14px;
}
#indexMain >>> .indexright .clocktime {
  color: white;
  font-size: 14px;
}
#indexMain >>> .indexright .weatherTemperature {
  color: white;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
}
#indexMain >>> .indexright .weatherReport {
  margin: 14px 0;
}
.indexbody {
  height: 100%;
  display: block;
  min-width: 1280px;
  background-image: url(./../assets/mapbackground.png);
  background-size: cover;
  min-height: 990px;
}
#indexMain >>> .tag_select span:hover {
  cursor: pointer;
}
#indexMain >>> .dataBoxTitle_focus {
  color: #fba100 !important;
  outline: none;
}
#indexMain >>> .dataBoxTitle_blur {
  outline: none;
}
#indexMain >>> .el-pagination button:disabled {
  background-color: transparent;
  color: #303133;
}
#indexMain >>> .el-pagination button:hover {
  color: #fba100;
}
#indexMain >>> .el-pagination .btn-next {
  background-color: transparent;
}
#indexMain >>> .el-pagination .btn-prev {
  background-color: transparent;
}
#indexMain >>> .el-pager li {
  background-color: transparent;
}
#indexMain >>> .el-pager li:hover {
  color: #fba100;
}
#indexMain >>> .el-pager li.active {
  color: #fba100;
}
#indexMain >>> .el-pagination {
  color: #586c86;
  padding: 0 0 0 15px;
}
#indexMain >>> .el-pagination__total {
  color: #586c86;
}
#indexMain >>> .el-table .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 25px;
}
.warning .el-col-3 {
  width: 14%;
  padding-left: 3%;
}
.warning .el-col-3 :hover {
  cursor: pointer;
}
#indexMain .tag_select span {
  font-size: 14px;
  margin-right: 10px;
}
#indexMain .tabsTitle {
  color: #586c86;
}
.indexright .el-select {
  margin-bottom: 6px;
}
.indexright .tag_select {
  line-height: 28px;
}
#indexMain >>> .el-carousel__container {
  min-height: 335px !important;
}
#indexMain >>> .el-input--mini .el-input__inner {
  background: #1d0d48;
  border: 1px solid #192762;
  color: #fff;
}
#indexMain >>> .sequenceNumber .cell div {
  background: #fba100 !important;
  border-radius: 2px !important;
}
#marker {
  width: 20px;
  height: 20px;
  border: 1px solid #088;
  border-radius: 10px;
  background-color: #0ff;
  opacity: 0.5;
}
#vienna {
  text-decoration: none;
  color: white;
  font-size: 11pt;
  font-weight: bold;
  text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-content {
  min-width: 180px;
}
        .imgBox img{
            width: 100%;
            height: 350px;
            margin: 0 auto;
            padding-top: 0;

        }
</style>